import React from "react";
import "./index.scss";
import { NavLink } from "react-router-dom";
import { Carousel, WingBlank, NoticeBar, WhiteSpace,Toast} from "antd-mobile";
import {connect} from 'react-redux';
import actions from '../../store/modules/book/actions';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ["1", "2", "3"],
      imgHeight: 176
    }
  }
  componentDidMount() {
    this.props.getExcellentBooks();
    this.props.getNewBooks();
    this.props.getHotBooks();
    setTimeout(() => {
      this.setState({
        data: [
          "p01AhEtaSHo5/j4TxTeCi4Y3chG",
          "p01I2kS54HEh/XlHxqwGIEYACZy",
          // "p01l8ILwwdSn/q9ZLm87QprMZO5",
          'p018tEwzlIIE/guWV59fgJ2hbim',
          // 'p01vZz6ZvWlk/zMfCPiKMco34ma'
        ]
      });
    }, 100);
  }
  render() {
    return (
      <div className="g-doc">
        <div className="g-hd">
          <div className="log">多看阅读</div>
          <div className="act">
            {
              window.localStorage.getItem('username') ? (
              <NavLink to="/bookshelf">
                <div className="m-login iconfont icon-shujiashi" />
              </NavLink>) : (
              <NavLink to="/login">
                <div className="m-login iconfont icon-geren" />
              </NavLink>)
            }
            <span className="bor">|</span>
            <NavLink to="/search">
              <div className="m-search iconfont icon-sousuo" />
            </NavLink>
          </div>
        </div>
        <div className="g-bd">
          <div className='g-wheel'>
            <WingBlank>
              <Carousel
                className="space-carousel"
                frameOverflow="visible"
                cellSpacing={10}
                slideWidth={0.8}
                autoplay
                infinite
                afterChange={index => this.setState({ slideIndex: index })}
              >
                {this.state.data.map((val, index) => (
                  <a
                    key={val}
                    href="http://www.alipay.com"
                    style={{
                      display: "block",
                      position: "relative",
                      top: this.state.slideIndex === index ? -10 : 0,
                      height: this.state.imgHeight,
                      boxShadow: "2px 1px 1px rgba(0, 0, 0, 0.2)"
                    }}
                  >
                    <img
                      src={`http://image.read.duokan.com/mfsv2/download/fdsc3/${val}.jpg!q90
                      `}
                      alt=""
                      style={{ width: "100%", verticalAlign: "top" }}
                      onLoad={() => {
                        // fire window resize event to change height
                        window.dispatchEvent(new Event("resize"));
                        this.setState({ imgHeight: "auto" });
                      }}
                    />
                  </a>
                ))}
              </Carousel>
            </WingBlank>
          </div>
          <div className='announcement'>
          <WhiteSpace />
          <NoticeBar mode="link" onClick={() => Toast.success('恭喜获得阅读铃铛！请登录领取')}>
            火爆讯息: 阅读送铃铛，奖励免费领
          </NoticeBar>
          <WhiteSpace />
          </div>

          <div className="m-nav">
            <ul className="m-nav-top">
              <li>
                <NavLink
                  to="/special"
                  className="box"
                  style={{ backgroundColor: "#ef4848" }}
                >
                  <i className="iconfont icon-sale" />
                </NavLink>
                <span>特价</span>
              </li>
              <li>
                <NavLink
                  to="/free"
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-Free-Tag" />
                </NavLink>
                <span>免费</span>
              </li>
              <li>
                <NavLink
                  to="/best"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-tubiaolunkuo-" />
                </NavLink>
                <span>畅销</span>
              </li>
              <li>
                <NavLink
                  to="/shelf"
                  className="box"
                  style={{ backgroundColor: "#2ec8e4" }}
                >
                  <i className="iconfont icon-icon_shujianor" />
                </NavLink>
                <span>书架</span>
              </li>
            </ul>
            <ul className="m-nav-bottom">
              <li>
                <NavLink
                  to="/classify"
                  className="box"
                  style={{ backgroundColor: "#02d26e" }}
                >
                  <i className="iconfont icon-fenlei" />
                </NavLink>
                <span>分类</span>
              </li>
              <li>
                <NavLink
                  to="/redeem"
                  className="box"
                  style={{ backgroundColor: "#4f8fd6" }}
                >
                  <i className="iconfont icon-shuquan" />
                </NavLink>
                <span>兑换码</span>
              </li>
              <li>
                <NavLink
                  to="/coupon"
                  className="box"
                  style={{ backgroundColor: "#7cc416" }}
                >
                  <i className="iconfont icon-changxiaoremai" />
                </NavLink>
                <span>购书券</span>
              </li>
              <li>
                <a
                  href='http://www.duokan.com/product'
                  className="box"
                  style={{ backgroundColor: "#f7942b" }}
                >
                  <i className="iconfont icon-bangzhushouji" />
                </a>
                <span>客户端</span>
              </li>
            </ul>
          </div>

          <div className='banner1'>
            <img src="http://img62.ddimg.cn/picc/WYSDx0718x750-192.jpg" />
          </div>

          {/* 火爆畅销 */}
          <div className='drag-wrap'>
              <div className='common-title'>
                <h3>火爆畅销</h3>
              </div>
              <div className='drag-product-list'>
                <ul className='clearfix'>
                  {
                    this.props.hotBooks.filter((book,index) => index < 9).map(item => (
                      <li className='need_price ' key={item.id}>
                        <NavLink to={`/detail/${item.id}`}>
                          <span className='imgArea'>
                          <img src={item.img} />
                          
                          </span>
                          <span className='detail'>
                            <em className='book-title'>{item.bookname}</em>
                            <i className='book-author'>{item.bookauthor}</i>
                            <span className='price'>
                              <i>{item.price}/本</i>
                            </span>
                          </span>
                        </NavLink>
                      </li>
                    ))
                  }
                  <li className='need_price '>
                    <NavLink to='/'>
                      <span className='imgArea'></span>
                    </NavLink>
                  </li>
                </ul>
              </div>
          </div>

          {/* 独家专区 */}
          <div className='drag-wrap'>
              <div className='common-title'>
                <h3>独家专区</h3>
              </div>
              <div className='drag-product-list'>
                <ul className='clearfix'>
                  {
                    this.props.hotBooks.filter((book,index) => index > 8).map(item => (
                      <li className='need_price ' key={item.id}>
                        <NavLink to={`/detail/${item.id}`}>
                          <span className='imgArea'>
                          <img src={item.img} />
                          
                          </span>
                          <span className='detail'>
                            <em className='book-title'>{item.bookname}</em>
                            <i className='book-author'>{item.bookauthor}</i>
                            <span className='price'>
                              <i>{item.price}/本</i>
                            </span>
                          </span>
                        </NavLink>
                      </li>
                    ))
                  }
                  <li className='need_price '>
                    <NavLink to='/'>
                      <span className='imgArea'></span>
                    </NavLink>
                  </li>
                </ul>
              </div>
          </div>
          <div className='banner'>
            <img src="http://img61.ddimg.cn/cuxiao/jd750-200.jpg" />
          </div>

          {/* 精品推荐 */}
          <div className="u-area">
            <div className="u-ttl3">
              <h3>精品推荐</h3>
              <NavLink to="/excellent" className="more">
                全部
                <div className="i-right iconfont icon-xiaoyinqiaxiangyoutubiao" />
              </NavLink>
            </div>
            <ul className="u-list-col3">
              {
                this.props.excellentBooks.filter((book,index) => index <6 ).map(item => (
                  <li key={item.bookId}>
                    <NavLink to={`/detail/${item.bookId}`} className="book">
                      <span className="cover">
                        <img src={item.bookImg} />
                      </span>
                      <div className="info">
                        <h3 className="tittle">{item.bookName}</h3>
                        <p className="author">
                          <span>{item.author}</span>
                        </p>
                      </div>
                    </NavLink>
                  </li>
                ))
              }
            </ul>
            <div className="u-aimg">
              <ul className="f-cb">
                <li>
                  <a href='http://www.duokan.com/m/special/13455'>
                    <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01KSvmdBUO5/OEzX5XydcbpKj7.jpg" />
                  </a>
                </li>
                <li>
                  <a href='http://www.duokan.com/m/special/13516'>
                    <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01mUlYpLHKm/h9pqI0DsZ32Yxz.jpg" />
                  </a>
                </li>
              </ul>
            </div>
          </div>

          {/* 新书上架 */}
          <div className="u-area">
            <div className="u-ttl3">
              <h3>新书上架</h3>
              <NavLink to="/newbook" className="more">
                全部
                <div className="i-right iconfont icon-xiaoyinqiaxiangyoutubiao" />
              </NavLink>
            </div>
            <ul className="u-list-col3">
              {
                this.props.newBooks.filter((book,index) => index < 6).map(item => (
                  <li key={item.bookId}>
                    <NavLink to={`/detail/${item.bookId}`} className="book">
                      <span className="cover">
                        <img src={item.bookImg} />
                      </span>
                      <div className="info">
                        <h3 className="tittle">{item.bookName}</h3>
                        <p className="author">
                          <span>{item.author}</span>
                        </p>
                      </div>
                    </NavLink>
                  </li>
                ))
              }
            </ul>
            <div className="u-aimg" style={{ borderBottom: 0 }}>
              <ul className="f-cb">
                <li>
                  <a href='http://www.duokan.com/m/special/13536'>
                    <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p01o97NiISsF/83iVA4ZfO0x1MF.jpg" />
                  </a>
                </li>
                <li>
                  <a href='http://www.duokan.com/m/special/13529'>
                    <img src="http://image.read.duokan.com/mfsv2/download/fdsc3/p017XKezHq0g/jcncd3yctFpp9G.jpg" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="g-ft">
          <div className="m-cprt">
            <p className="m-crip">
              <span>多看客户端</span>
              <b>|</b>
              <span>电脑版</span>
            </p>
            <p>Copyright©duokan.com</p>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(
  state => {
    return {
      excellentBooks:state.book.excellentBooks,
      newBooks:state.book.newBooks,
      hotBooks:state.book.hotBooks
    }
  },
  dispatch => {
    return {
        getExcellentBooks: (page =1,pageSize = 10) => {
            let payload = {
                page,
                pageSize
            };
            dispatch(actions.getExcellentBooksAct(payload));
        },
        getNewBooks: (page =1,pageSize = 10) => {
          let payload = {
              page,
              pageSize
          };
          dispatch(actions.getNewBooksAct(payload));
        },
        getHotBooks: () => {
          dispatch(actions.getHotBooksAct());
        }
    }
  }
)(Home);
